<template>
  <div class="container">
    <el-form>
      <el-form-item>
        <!-- <div class="sta-box">
          <img class="sta-image" src="@/assets/sta1.jpg" alt="" />
          <img class="sta-image" src="@/assets/sta2.jpg" alt="" />
          <img class="sta-image" src="@/assets/sta3.jpg" alt="" />
          <img class="sta-image" src="@/assets/sta4.jpg" alt="" />
          <img class="sta-image" src="@/assets/sta5.jpg" alt="" />
        </div> -->

      </el-form-item>
      <el-form-item>
        <el-card >
          <div class="search-container">
            <!-- <span style="margin-left: 15px">文章ID：</span
            ><el-input
              class="search-box"
              placeholder="请输入文章ID"
              size="mini"
              v-model="queryData.docid"
              clearable
            ></el-input> -->
            <!-- <span style="margin-left: 15px">作者：</span
            ><el-input
              class="search-box"
              placeholder="请输入文章作者"
              size="mini"
              v-model="queryData.author"
              clearable
            ></el-input> -->
            <span style="margin-left: 15px">关键词：</span
            ><el-input
              class="search-box"
              placeholder="请输入关键词"
              size="mini"
              v-model="queryData.query"
              clearable
            ></el-input>
            <span style="margin-left: 15px">来源：</span>
            <el-select
              v-model="queryData.source"
              placeholder="请选择文章来源"
              size="mini"
              clearable
            >
              <el-option
                v-for="item in articleSource"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>

            <span style="margin-left: 15px">分类：</span>
            <el-select
              v-model="queryData.category"
              placeholder="请选择文章类别"
              clearable
              size="mini"
            >
              <el-option
                v-for="item in articleCategory"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
            <el-button
              type="success"
              size="mini"
              class="reset-click"
              @click="reset"
              >重置</el-button
            >
            <el-button
              type="warning"
              size="mini"
              class="search-click"
              @click="refresh(1)"
              >查询</el-button
            >
            <div class="dataPicker">
              <!-- <span>时间筛选：</span>
              <el-date-picker
                v-model="dateSelect"
                type="daterange"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
              >
              </el-date-picker> -->
              <!-- <span>国内外：</span>
              <el-select
                v-model="queryData.country"
                placeholder="国内外"
                size="mini"
                clearable
              >
                <el-option
                  v-for="item in countryEnum"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select> -->
              <!-- <el-button
                type="primary"
                @click="setMinTime('2021-01-01', '2021-12-31')"
                >2021-01-01</el-button
              >
              <el-button
                type="primary"
                @click="setMinTime('2022-01-01', '2022-12-31')"
                >2022-01-01</el-button
              >
              <el-button
                type="primary"
                @click="setMinTime('2023-01-01', '2023-12-31')"
                >2023-01-01</el-button
              > -->
            </div>
          </div>
        </el-card>
      </el-form-item>
      <el-form-item>
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          :fit="true"
          @row-dblclick="tocopy"
        >
          <el-table-column type="index" label="序号" align="center" width="50">
          </el-table-column>
          <el-table-column prop="title" label="标题" align="center">
            <template slot-scope="{ row }">
              <el-link @click="gotoPage(row)">{{ row.title }}</el-link>
            </template></el-table-column
          >
          <!-- <el-table-column
            prop="author"
            label="作者"
            align="center"
            :show-overflow-tooltip="true"
            width="250"
          >
          </el-table-column> -->
          <el-table-column
            prop="pub_time"
            label="发布时间"
            align="center"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="category"
            label="类别"
            align="center"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="source"
            label="来源"
            align="center"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="tags"
            label="关键字"
            align="center"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <div class="pagination-box">
          <el-pagination
            background
            layout="total,sizes,prev, pager, next,jumper"
            :current-page.sync="queryData.from"
            :page-size.sync="queryData.size"
            @size-change="getArtData"
            @current-change="getArtData"
            :page-sizes="pageSizes"
            :total="search_nums"
          >
          </el-pagination>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getArtIndex } from "@/api/art.js";
import dayjs from "dayjs";
export default {
  data() {
    return {
      pageSizes: [10, 20, 30, 40, 50, 100],
      all_doc_nums: 0, //总数
      BBC_nums: 0, //BBC
      VOA_nums: 0, //VOA
      zaobao_nums: 0, //联合早报
      people_nums: 0, //人民日报
      NYT_nums: 0, //纽约时报
      GT_nums: 0, //环球时报
      search_nums: 0, //搜索数量
      search_after: [0, ""], //临时存储
      total_docs: 0,
      total_words: 0,
      main_medias: 0,
      foreign_docs: 0,
      articleCategory: [
        "高质量发展",
        "科教兴国战略",
        "全过程人民民主",
        "全面依法治国",
        "文化自信自强",
        "保障和改善民生",
        "人与自然和谐共生",
        "总体国家安全",
        "国防和军队现代化",
        "推进祖国统一",
        "人类命运共同体",
        "全面从严治党",
      ], //文章类别枚举
      articleSource: [
        "人民日报",
        "联合早报",
        "BBC中文",
        "VOA中文",
        "纽约时报",
        "环球时报",
      ], //文章来源枚举
      tableData: [],
      countryEnum: ["国内", "国外"],
      queryData: {
        min_time: "",
        max_time: "",
        docid: "",
        source: "",
        query: "",
        author: "",
        from: 1,
        size: 30,
        category: "",
        search_after: [0, ""],
        // country: "", //国家名称或国际标准名称或国际约束名称或“any” 默认为国际中心'
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      dateSelect: [,],
    };
  },
  created() {
    this.getArtData();
  },
  methods: {
    filterBySource(source) {
      this.queryData.source = source;
      this.refresh();
    },
    setMinTime(time1, time2) {
      this.reset();
      this.queryData.min_time = time1;
      this.queryData.max_time = time2;
      this.refresh(1); //测试条件
    },
    reset() {
      this.dateSelect = [,];
      this.queryData = {
        min_time: "",
        max_time: "",
        docid: "",
        source: "",
        query: "",
        author: "",
        from: 1,
        size: 30,
        category: "",
        country: "",
        search_after: [0, ""],
      };
    },
    tocopy(row) {
      const input = document.createElement("input");
      input.setAttribute("value", row.docid);
      document.body.appendChild(input);
      input.select();
      document.execCommand("copy");
      document.body.removeChild(input);
    },
    gotoPage(row) {
      // this.$router.push({ path: "/articleDetail", query: row });
      let routeData = this.$router.resolve({
        path: "/articleDetail",
        query: row,
      });
      window.open(routeData.href, "_blank");
    },

    refresh(data) {
      if (data != 1) {
        this.queryData.search_after = this.search_after;
      } else {
        this.queryData.search_after = [0, ""];
      }
      this.queryData.from = 1;
      // this.dateRangeFormat();
      this.getArtData();
    },
    dateRangeFormat() {
      if (this.dateSelect && this.dateSelect.length != 1) {
        this.queryData.min_time = dayjs(this.dateSelect[0]).format(
          "YYYY-MM-DD"
        );
        this.queryData.max_time = dayjs(this.dateSelect[1]).format(
          "YYYY-MM-DD"
        );
      } else {
        this.queryData.min_time = "";
        this.queryData.max_time = "";
      }
    },
    rightClick(row) {
      console.log(row);
    },
    async getArtData() {
      this.dateRangeFormat();
      const res = await getArtIndex(this.queryData);
      if (res && res.code == "200") {
        const {
          BBC_nums,
          VOA_nums,
          all_doc_nums,

          zaobao_nums,
          search_after,
          search_nums,
          NYT_nums,
          GT_nums,
          total_docs,
          total_words,
          main_medias,
          people_nums,
          foreign_docs,
        } = res.result;
        this.BBC_nums = BBC_nums;
        this.VOA_nums = VOA_nums;
        this.all_doc_nums = all_doc_nums;
        this.people_nums = people_nums;
        this.zaobao_nums = zaobao_nums;
        this.search_nums = search_nums;
        this.NYT_nums = NYT_nums;
        this.GT_nums = GT_nums; // for gt search, not for yahoo search. 汇总数据汇总
        this.total_docs = total_docs;
        (this.total_words = total_words),
          (this.main_medias = main_medias),
          (this.foreign_docs = foreign_docs),
          (this.search_after = search_after);

        this.tableData = res.result.docs_info;
        this.$message({
          type: "success",
          message: "查询成功",
        });
      }

      // if (type == 2) {
      //   this.reset();
      // }
    },
  },
};
</script>

<style  lang='less'  scoped >
.container {
  margin: 10px 20px 10px 20px;
}
.pagination-box {
  display: flex;
  justify-content: center;
}
.dataPicker {
  margin: 10px 0px 10px 15px;
}
.card-box {
  padding: 20px;
}
.search-box {
  width: 135px;
}
.search-container {
  position: relative;
  bottom: 10px;
}
.pointer {
  cursor: pointer;
}
.reset-click {
  position: absolute;
  right: 80px;
  top: 7px;
}
.search-click {
  position: absolute;
  right: 10px;
  top: 7px;
}
.el-form-item {
  margin-bottom: 10px;
}
.el-select /deep/ .el-input__inner {
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  height: 30px;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 140px;
}
.sta-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.sta-image {
  width: 160px;
}
@media screen and(min-width: 1200px) {
  .sta-image {
    width: 160px;
  }
}
</style>